<template>
  <div :style="{...textStyle}" class="position-full flex-justify-around">
    <div class="flex-1">{{timeValue}}</div>
  </div>
</template>

<script>
  import {formatColor} from '@/utils';
  import {momentFormat} from '@/config/ide/common';
  import {mapState} from 'vuex';
  import {WidgetDateTime} from "@/modules/IDE/widget/atom/WidgetDateTime";

  export default {
    name: 'DateTime',
    props: {
      widget: {
        type: WidgetDateTime,
        default: () => {}
      }
    },
    data() {
      return {
        timer: null,
        timeValue: ''
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      textStyle() {
        const {textStyle = {}} = this.state;
        const textStyles = {};
        // 字体
        const {size = 14, color, weight, align} = textStyle;
        size && (textStyles.fontSize = `${size}px`);
        color && (textStyles.color = formatColor(color, this.activeTheme));
        weight && (textStyles.fontWeight = weight);
        align && (textStyles.textAlign = align);
        return textStyles;
      },
    },
    mounted() {
      this.updateTimeValue();
      this.startTimer();
      this.$EventBus.$on('dateTimeFormatChange', (widgetId) => {
        if (widgetId !== this.widget.id) return;
        this.updateTimeValue();
      });
    },
    destroyed() {
      clearInterval(this.timer);
      this.timer = null;
    },
    methods: {
      updateTimeValue() {
        const {format} = this.widget.UI.data;
        let dateFormat;
        switch (format) {
          case 'time':
            dateFormat = momentFormat.time;
            break;
          case 'date':
            dateFormat = momentFormat.date;
            break;
          case 'dateCN':
            dateFormat = momentFormat.dateCN;
            break;
          case 'dateSlant':
            dateFormat = momentFormat.dateSlant;
            break;
          case 'monthDayCN':
            dateFormat = momentFormat.monthDayCN;
            break;
          case 'monthDay':
            dateFormat = momentFormat.monthDay;
            break;
          case 'monthDaySlant':
            dateFormat = momentFormat.monthDaySlant;
            break;
          case 'datetime':
            dateFormat = momentFormat.datetime;
            break;
          case 'datetimeMDHM':
            dateFormat = momentFormat.datetimeMDHM;
            break;
          case 'year':
            dateFormat = momentFormat.year;
            break;
          case 'month':
            dateFormat = momentFormat.month;
            break;
          case 'day':
            dateFormat = momentFormat.day;
            break;
          case 'week':
            dateFormat = momentFormat.week;
            break;

          default:
            dateFormat = momentFormat.time;
            break;
        }
        this.timeValue = moment().format(dateFormat);
      },
      startTimer() {
        this.timer = setInterval(() => {
          this.updateTimeValue();
        }, 60000);
      }
    }
  };
</script>

<style scoped>
</style>
